<template>
  <div class="followpage">
    <Navhead labelText="我的跟帖" />
    <div class="Myfollow" v-for="item in followlist" :key="item.id">
      <div class="time">{{item.create_date.split('T')[0]}}</div>
      <div class="parent" v-if="item.parent">
        <div class="originalReply">回复: {{item.parent.user.nickname}}</div>
        <div class="Reply">{{item.parent.content}}</div>
      </div>
      <div class="comment">{{item.content}}</div>
      <div class="origin">
        <div class="origintext">原文: {{item.post.title}}</div>
        <span class="iconfont iconjiantou1"></span>
      </div>
    </div>
    <div class="Morefollow">更多跟帖 >></div>
  </div>
</template>

<script>
import Navhead from "../../components/Navhead";
export default {
  components: {
    Navhead
  },
  data() {
    return {
      followlist: []
    };
  },
  mounted() {
    this.$axios({
      url: "/user_comments"
    }).then(res => {
      console.log(res);
      this.followlist = res.data.data;
    });
  }
};
</script>

<style lang="less" scoped>
.followpage {
  padding: 7.222vw 4.444vw 7.222vw 5.556vw;
  .Myfollow {
    padding: 0 0 10px;
    margin: 0 0 10px;
    border-bottom: 1px solid #ccc;
    .time {
      font-size: 14px;
      color: #888;
      margin-top: 20px;
    }
    .parent {
      padding: 15px 10px;
      margin: 10px 0;

      background-color: #e4e4e4;
      color: #888;
      .originalReply {
        margin-bottom: 10px;
        font-size: 12px;
      }
      .Reply {
        font-size: 13px;
      }
    }
    .comment {
      margin: 10px 0;
      font-size: 14px;
      color: #222;
    }
    .origin {
      display: flex;
      font-size: 13px;
      color: #888;
      align-items: center;
      .origintext {
        flex: 1;
        padding: 4px 0;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
  .Morefollow {
    margin-top: 30px;
    text-align: center;
    color: #888;
    font-size: 14px;
  }
}
</style>